<template>
  <div class="about">
    <div>123789</div>
    <button @click="fnMove(0)">点击</button>
    <img src="https://i04piccdn.sogoucdn.com/3225450f68575a84">
    <canvas id="cvs">
      <div>当前浏览器版本过低，请升级浏览器，或者用其他浏览器访问...</div>
      <div>当前浏览器版本过低，请升级浏览器，或者用其他浏览器访问...</div>
    </canvas>
  </div>
</template>
<script>
export default {
  data() {
    return {
      oCvs:{
        a:[0,10],
        b:[20, 35],
        c:[20, 25],
       // d:[]
      }
    }
  },
  created(){
    console.log(this.$route.query.id+'123456789')
  },
  mounted(){
     // this.ss()
      this.fnCvs()
  },
  computed: {
 
  },
  methods: {
    ss() {
      console.log(this.$route.query.id);
      console.log(typeof this.$route.query.id);
    },
    fnMove(a) {
      this.fnMovein(a);
    },
    fnMovein(a) {
      if(a==0) {
        this.oCvs.a[a]=0
        this.oCvs.b[a]=20
        this.oCvs.c[a]=20
        
var interval = setInterval(()=>{
          if(this.oCvs.a[a]<200){
             this.oCvs.a[a]+=10
        this.oCvs.b[a]+=10
        this.oCvs.c[a]+=10
        this.fnCvs(a);
          }else{
             clearInterval(interval);
          }
      
        },300)
       
       // window.requestAnimationFrame(this.fnCvs(a))

      } else if(a==1) {
        this.oCvs.a[a]+=10;
        this.oCvs.b[a]+=10;
        this.oCvs.c[a]+=10;
      }
    },
    fnCvs(a) {
       var canvas = document.getElementById('cvs');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    // ctx.clearRect(0,0,700,300);
    // ctx.beginPath();
    // ctx.moveTo( this.oCvs.a[a], 50);
    // ctx.lineTo(this.oCvs.b[a], 75);
    // ctx.lineTo(this.oCvs.c[a], 25);
    // ctx.fill();
    var img = new Image()
      img.src = "https://i04piccdn.sogoucdn.com/3225450f68575a84"
    img.onload = function(){ 
      console.log(img)
    if(img.complete){ // 根据图像重新设定了canvas的长宽 
   // ctx.setAttribute("width",img.width) 
    //ctx.setAttribute("height",img.height) // 绘制图片 
    ctx.drawImage(img,0,0,100,100) 
    } 
    }


  }

    }
  },
    
 
};
</script>
<style scoped>
      #cvs{
        width: 700px;
       height: 200px;
       background: gray;
     }
</style>
